import React , {useState,useEffect}from 'react'
import {useNavigate} from "react-router-dom" // 只要以use开头的都是hooks
import axios from 'axios'
// 接口的名字和路由的名字不能一样，否则就走了接口了，访问不到路由了
function Movie() {
    const [arr,setArr] = useState([])
  let navigate = useNavigate()
  let goDetail = (item)=> {
    //  console.log(item);
    navigate("/detail/" + item.id)
    //{
    //     state:item
    // })
  }
  useEffect(()=>{
     axios.get("/api/movielist").then(res=>{
         setArr(res.data)
     })
  },[])
  return (
    <div>
        {
            arr && arr.length ? arr.map((item,index)=>{
                return <div key={index} className="moviewrap" onClick={()=>goDetail(item)}>
                    <div>
                        <img src={item.img} alt="" />
                    </div>
                    <div style={{display:"flex",justContent:"spaceBetween"}}>
                        <div>
                            <h4>{item.name}</h4>
                            <p>关注评：{item.score}</p>
                            <p>主演：{item.actor}</p>
                        </div>
                        <button className='mybetton'>购票</button>
                    </div>
                </div>
            }):"暂无数据"
        }
    </div>
  )
}

export default Movie